<template>
    <div class="section-wrap hidden-statistics">
        <!-- 统计筛选项 -->
        <div class="form-section">
            <p class="statisticsGroup">
                <group label-width="5em">
                    <popup-picker :title="('隐患来源')"
                                  :data="hiddenmeta.sourceList"
                                  v-model="hideSource"
                                  @on-change="changeSource"
                                  :placeholder="('请选择')"></popup-picker>
                </group>
            </p>

            <!-- <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>选择工程类别</label>
                </div>
                <div class="right-select">
                    {{hiddenmeta.category?hiddenmeta.category:"全部"}}
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
            </div> -->
            <p class="statisticsGroup">
                <group label-width="7em">
                    <popup-picker :title="('选择工程类别')"
                                  :data="hiddenmeta.projectList"
                                  v-model="projectCategory"
                                  @on-change="changeProject"
                                  :placeholder="('请选择')"></popup-picker>
                </group>
            </p>
            <p class="statisticsGroup">
                <group label-width="5em">
                    <popup-picker :title="('检查类型')"
                                  :data="hiddenmeta.checkList"
                                  v-model="checkCategory"
                                  @on-change="changeCheck"
                                  :placeholder="('请选择')"></popup-picker>
                    <!-- <datetime title="datetime" v-model="date"></datetime> -->
                </group>
            </p>
            <p class="statisticsGroup">
                <group label-width="5em">
                    <popup-picker :title="('统计指标')"
                                  :data="hiddenmeta.normList3"
                                  v-model="normVal"
                                  @on-change="changeNorm"
                                  :placeholder="('隐患数量')"></popup-picker>
                </group>
            </p>
            <p class="statisticsGroup">
                <group label-width="5em">
                    <datetime class="dateTit"
                              title="统计开始时间"
                              v-model="hiddenmeta.startTime"
                              placeholder="请选择"
                              @on-change="changeStartTime"></datetime>
                </group>
            </p>
            <p class="statisticsGroup noborder">
                <group label-width="5em">
                    <datetime class="dateTit"
                              title="统计结束时间"
                              v-model="hiddenmeta.endTime"
                              placeholder="请选择"
                              @on-change="changeEndTime"></datetime>
                </group>
            </p>
        </div>
        <!-- 统计数据列表 -->
        <div class="static-sectionBox">
            <!-- 隐患数量统计 -->
            <div class="static-section1"
                 v-if="onShow1">
                <div class="staticList-head">
                    <div class="hidden-totalNum redColor">隐患总数：{{itemNum.Total}}</div>
                    <div class="hidden-num">
                        <div>一般隐患：
                            <span class="blueColor">{{itemNum.ItemType1}}</span>
                        </div>
                        <div>重大隐患：
                            <span class="blueColor">{{itemNum.ItemType2}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <h4>{{item.ItemName}}</h4>
                        <div class="dangerGroup clearfix">
                            <div class="baseDanger fl">一般隐患：{{item.ItemType1}}</div>
                            <div class="majorDanger fl">重大隐患：{{item.ItemType2}}</div>
                            <div class="totalDangerNum fl">总数：{{item.Total}}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 隐患级别统计 -->
            <div class="static-section2"
                 v-if="onShow2">
                <div class="staticList-head">
                    <div class="hidden-totalNum redColor">隐患总数：{{itemNum.Total}}</div>
                    <div class="hidden-num">
                        <div>重大隐患：
                            <span class="blueColor">{{itemNum.ItemType1}}</span>
                        </div>
                        <div>占比：
                            <span class="blueColor">{{itemNum.Rate | toPercentNum}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <h4>{{item.ItemName}}</h4>
                        <div class="dangerGroup clearfix">
                            <div class="baseDanger fl">隐患总数：{{item.Total}}</div>
                            <div class="majorDanger fl">重大隐患：{{item.ItemType1}}</div>
                            <div class="totalDangerNum fl">占比：{{item.Rate | toPercentNum}}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 隐患整改率统计 -->
            <div class="static-section2"
                 v-if="onShow3">
                <div class="staticList-head">
                    <div class="hidden-totalNum redColor">隐患总数：{{itemNum.Total}}</div>
                    <div class="hidden-num">
                        <div>已整改隐患：
                            <span class="blueColor">{{itemNum.ItemType1}}</span>
                        </div>
                        <div>占比：
                            <span class="blueColor">{{itemNum.Rate | toPercentNum}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <h4>{{item.ItemName}}</h4>
                        <div class="dangerGroup clearfix">
                            <div class="baseDanger fl">隐患总数：{{item.Total}}</div>
                            <div class="majorDanger fl">已整改数量：{{item.ItemType1}}</div>
                            <div class="totalDangerNum fl">占比：{{item.Rate | toPercentNum}}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 隐患一次性整改率统计 -->
            <div class="static-section2"
                 v-if="onShow4">
                <div class="staticList-head">
                    <div class="hidden-totalNum greenColor">已整改：{{itemNum.ItemType1}}</div>
                    <div class="hidden-num">
                        <div>一次性整改：
                            <span class="blueColor">{{itemNum.ItemType2}}</span>
                        </div>
                        <div>占比：
                            <span class="blueColor">{{itemNum.Rate | toPercentNum}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <h4>{{item.ItemName}}</h4>
                        <div class="dangerGroup clearfix">
                            <div class="baseDanger fl">已整改：{{item.ItemType1}}</div>
                            <div class="majorDanger fl">一次性整改：{{item.ItemType2}}</div>
                            <div class="totalDangerNum fl">占比：{{item.Rate | toPercentNum}}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 隐患分布统计 -->
            <div class="static-section1"
                 v-if="onShow5">
                <div class="staticList-head">
                    <div class="hidden-totalNum redColor">隐患总数：{{itemNum.Total}}</div>
                    <div class="hidden-num">
                        <div>一般隐患：
                            <span class="blueColor">{{itemNum.ItemType1}}</span>
                        </div>
                        <div>重大隐患：
                            <span class="blueColor">{{itemNum.ItemType2}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <h4>{{item.ItemName}}</h4>
                        <div class="dangerGroup clearfix">
                            <div class="baseDanger fl">一般隐患：{{item.ItemType1}}</div>
                            <div class="majorDanger fl">重大隐患：{{item.ItemType2}}</div>
                            <div class="totalDangerNum fl">总数：{{item.Total}}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 隐患类别统计 -->
            <div class="static-section1"
                 v-if="onShow6">
                <div class="staticList-head">
                    <div class="hidden-totalNum hidden-cate">安全检查总次数：
                        <span class="blueColor">{{itemNum.ItemType1}}</span>
                    </div>
                    <div class="hidden-num">
                        <div>检查隐患总数量：
                            <span class="blueColor">{{itemNum.ItemType2}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis staticListFlex"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <div class="staticListFlex_l">{{item.ItemName}}</div>
                        <span class="staticListFlex_r">{{item.Total}}</span>
                    </li>
                </ul>
            </div>

            <!-- 隐患占比率统计 -->
            <div class="static-section1"
                 v-if="onShow7">
                <div class="staticList-head">
                    <div class="hidden-totalNum hidden-cate">安全检查总次数：
                        <span class="blueColor">{{itemNum.ItemType1}}</span>
                    </div>
                    <div class="hidden-num">
                        <div>检查隐患总数量：
                            <span class="blueColor">{{itemNum.ItemType2}}</span>
                        </div>
                    </div>
                </div>
                <ul class="staticList-content">
                    <li class="staticListLis staticListFlex"
                        v-if="itemList.length"
                        v-for="(item,index) in itemList"
                        :key="index">
                        <div class="staticListFlex_l">{{item.ItemName}}</div>
                        <span class="staticListFlex_r">{{item.Rate | toPercentNum}}</span>
                    </li>
                    <!-- <li class="staticListLis staticListFlex">
                        <div class="staticListFlex_l">交叉作业</div>
                        <span class="staticListFlex_r">0%</span>
                    </li> -->
                </ul>
            </div>

            <div v-if="!itemList.length"
                 class="nodata">暂无统计数据</div>

        </div>

        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
export default {
    data () {
        return {
            userInfo: '',
            onShow1: true,
            onShow2: false,
            onShow3: false,
            onShow4: false,
            onShow5: false,
            onShow6: false,
            onShow7: false,
            hideSource: ['全部'], // 隐患来源
            projectCategory: ['全部'], // 工程类别
            checkCategory: ['全部'], // 检查类型
            normVal: ['隐患数量'], // 统计指标
            hiddenmeta: {
                sourceList: [['全部', '公司层级', '分子公司层级', '项目部层级']], // 隐患来源列表
                projectList: [], // 工程类别
                checkList: [['全部', '日常检查', '周检查', '月度检查', '季度检查', '专项检查', '其它检查']], // 检查类型列表
                normList: [['隐患数量', '隐患级别', '隐患整改率', '隐患一次性整改率', '隐患分布', '隐患类别', '隐患占比率']], // 统计指标列表
                normList2: [],
                normList3: [['隐患数量', '隐患级别', '隐患整改率', '隐患一次性整改率', '隐患分布']],
                startTime: '', // 开始时间
                endTime: '' // 结束时间
            },
            deptname: '', // 来源单位名称
            deptid: '', // 来源单位id
            itemNum: {}, // 统计分析列表头隐患数量集合
            itemList: {} // 统计分析列表数据集合
        }
    },
    created () {
        this.hiddenmeta.startTime = this.getdatenew()
        this.hiddenmeta.endTime = this.getdatenewnext()
    },
    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.hiddleType()
        this.getListData()
        // console.log(this.userInfo)
        this.hiddenmeta.normList2.push(this.hiddenmeta.normList[0].slice(0, 5))
    },
    filters: {
        toPercentNum (val) {
            if (!val) {
                return '0%'
            } else {
                return Number(val * 100).toFixed(1) + '%'
            }
        }
    },
    components: {
        myMenu
    },
    methods: {
        // 获取工程类别
        hiddleType () {
            var that = this
            var params = {
                'allowPaging': true,
                'business': 'GetProjectTypeList',
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '1ED7B8A3DA7725CC45700551F09CF2AE',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(
                params
            ).then((res) => {
                // console.log(res)
                let listArr = []
                let cateList = []
                if (res.data.code == 0) {
                    listArr = res.data.data
                    listArr = [{ Id: '', Name: '全部' }, ...listArr]
                }
                listArr.forEach((item, index) => {
                    cateList.push(item.Name)
                })
                that.hiddenmeta.projectList.push(cateList)
            }
            )
        },
        // 点击切换隐患来源
        changeSource (val) {
            this.getListData()
        },
        // 点击切换工程类别
        changeProject (val) {
            this.normVal = ['隐患数量']
            if (val[0] == '全部') {
                this.hiddenmeta.normList3 = this.hiddenmeta.normList2
            } else {
                this.hiddenmeta.normList3 = this.hiddenmeta.normList
            }
            this.getListData()
        },
        // 切换检查类型
        changeCheck (val) {
            this.getListData()
        },
        // 点击切换统计指标
        changeNorm (val) {
            if (val[0] === '隐患数量') {
                this.onShow2 = false
                this.onShow3 = false
                this.onShow4 = false
                this.onShow5 = false
                this.onShow6 = false
                this.onShow7 = false
                this.onShow1 = true
            } else if (val[0] === '隐患级别') {
                this.onShow1 = false
                this.onShow3 = false
                this.onShow4 = false
                this.onShow5 = false
                this.onShow6 = false
                this.onShow7 = false
                this.onShow2 = true
            } else if (val[0] === '隐患整改率') {
                this.onShow1 = false
                this.onShow2 = false
                this.onShow4 = false
                this.onShow5 = false
                this.onShow6 = false
                this.onShow7 = false
                this.onShow3 = true
            } else if (val[0] === '隐患一次性整改率') {
                this.onShow1 = false
                this.onShow2 = false
                this.onShow3 = false
                this.onShow5 = false
                this.onShow6 = false
                this.onShow7 = false
                this.onShow4 = true
            } else if (val[0] === '隐患分布') {
                this.onShow1 = false
                this.onShow2 = false
                this.onShow3 = false
                this.onShow4 = false
                this.onShow6 = false
                this.onShow7 = false
                this.onShow5 = true
            } else if (val[0] === '隐患类别') {
                this.onShow1 = false
                this.onShow2 = false
                this.onShow3 = false
                this.onShow4 = false
                this.onShow5 = false
                this.onShow7 = false
                this.onShow6 = true
            } else if (val[0] === '隐患占比率') {
                this.onShow1 = false
                this.onShow2 = false
                this.onShow3 = false
                this.onShow4 = false
                this.onShow5 = false
                this.onShow6 = false
                this.onShow7 = true
            }

            this.getListData()
        },
        // 切换开始时间
        changeStartTime (val) {
            if (this.checkTime(val, this.hiddenmeta.endTime)) {
                this.getListData()
            }
        },
        // 切换结束时间
        changeEndTime (val) {
            if (this.checkTime(this.hiddenmeta.startTime, val)) {
                this.getListData()
            }
        },
        // 获取统计列表
        getListData () {
            let that = this
            let projectCategory = this.toNull(this.projectCategory)
            let checkCategory = this.toNull(this.checkCategory)
            let hideSource = this.toNull(this.hideSource)
            this.$vux.loading.show({
                text: '加载中...'
            })
            let params = {
                'allowPaging': true,
                'business': 'FetchHiddenDangersTotal',
                'data': {
                    'ProjectTypeId': projectCategory,
                    'checkType': checkCategory,
                    'deptId': this.userInfo.deptid,
                    'from': this.hiddenmeta.startTime,
                    'source': hideSource,
                    'to': this.hiddenmeta.endTime,
                    'type': this.normVal[0],
                    'userDeptId': this.userInfo.deptid
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': 'B0A5D3EA3533B719041099B502B82514',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        that.itemNum = res.data.data.Part2
                        that.itemList = res.data.data.Part3
                        this.$vux.loading.hide()
                    } else {
                        this.$vux.toast.text(res.data.info)
                    }
                }).catch(() => {

                })
        },
        // 验证开始和结束时间
        checkTime (startTime, endTime) {
            if (startTime.length > 0 && endTime.length > 0) {
                var startTmp = startTime.split('-')
                var endTmp = endTime.split('-')
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2])
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2])
                if (sd.getTime() > ed.getTime()) {
                    this.$vux.toast.text('开始日期不能大于结束日期')
                    return false
                }
            }
            return true
        },
        // 小数转化成百分比
        toPercent (point) {
            var str = Number(point * 100).toFixed(1)
            str += '%'
            return str
        },
        // 传值处理
        toNull (val) {
            if (val[0] == '全部') {
                return ''
            } else {
                return val[0]
            }
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var currentdate = year + seperator1 + '01' + seperator1 + '01'
            return currentdate
        },
        getdatenewnext () {
            var date = new Date()
            //  date.setTime(date.getTime()+ 24*60*60*1000);
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()

            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        }
    }
}
</script>
<style lang="less" scoped>
.form-section .noborder {
    border: 0;
}
.section-wrap .nodata {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}
.right-select {
    font-size: 14px;
    color: #999;
}
.right-select > i {
    color: #999;
}
.btns .green {
    background: #15bc84;
}
.newcompanyList {
    font-size: 14px;
    text-align: right;
    color: #999;
}
.statisticsGroup {
    margin-left: 20px;
    border-bottom: 1px solid #efeff4;
}

//统计分析列表
.static-sectionBox {
    padding-left: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}
.staticList-head {
    display: flex;
    display: -webkit-flex;
    padding: 10px 0;
    border-bottom: 1px solid #efeff4;
    line-height: 30px;
}
.hidden-totalNum {
    width: 108px;
    border-right: 1px solid #efeff4;
    font-size: 14px;
    font-weight: bold;
}
.staticList-head .hidden-cate {
    padding-left: 14px;
    width: 168px;
    font-weight: normal;
}
.redColor {
    color: #f00;
}
.blueColor {
    color: #2269ff;
}
.greenColor {
    color: #15bd84;
}
.hidden-num {
    flex: 1;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    font-size: 14px;
}
.staticListLis {
    line-height: 27px;
    padding: 14px 0;
    border-bottom: 1px solid #efeff4;
    font-size: 14px;
    color: #999;
}
.staticListLis h4 {
    color: #333;
    font-weight: normal;
    font-size: 14px;
}
.baseDanger {
    margin-right: 48px;
}
.majorDanger {
    margin-right: 48px;
}
.dangerGroup div {
    color: #999;
    font-size: 14px;
}
.staticList-content .staticListFlex {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 20px;
}
.staticListFlex_l {
    color: #333;
    font-size: 14px;
}
</style>
<style>
.statisticsGroup .vux-no-group-title {
    margin-top: 0;
}
.statisticsGroup .weui-cells:before {
    display: none;
}
.statisticsGroup .weui-label {
    font-size: 14px;
    color: #333;
}
.statisticsGroup .vux-cell-value,
.statisticsGroup .vux-popup-picker-placeholder {
    font-size: 14px;
    color: #999;
}
.statisticsGroup .weui-cell_access {
    padding: 15px 24px 15px 0;
}
.statisticsGroup .weui-cell_access .weui-cell__ft::after {
    /* width: 8px;
    height: 8px;
    border-color: #a1a1a1; */
    height: 10px;
    width: 10px;
    margin-top: -6px;
    border-radius: 2px;
    border-width: 2px 2px 0 0;
}
.statisticsGroup .dateTit p {
    width: 150px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #333;
}
.statisticsGroup .weui-cells:after {
    display: none;
}
.weui-loading_toast .weui-toast {
    width: 100px;
    min-height: 40px;
    height: 100px;
    top: 280px;
    background: rgba(17, 17, 17, 0.65);
}
.hidden-statistics .vux-cell-placeholder {
    font-size: 14px;
    color: #999;
}
</style>
